<template>
	<view class="page">
		<view class="page-menu">
      <view style="display: flex;flex-direction: row">
        <view class="page_title" style="width: 50%">
          选择节目单
        </view>
        <view style="width: 50%;text-align:right;font-size: 25rpx;line-height: 34rpx">
          {{login_user}} <span style="color: #800A0B;margin-left: 10rpx;text-decoration:underline" @click="loginOut">切换账号</span>
        </view>
      </view>
			<view class="info_data">
				<u-row gutter="16" >
					<u-col span="2">
						<view class="checkbox" >
							<u-checkbox-group @change="CheckedAll">
							  <u-checkbox v-model="checkedAll" shape="square" active-color="#FFC694"></u-checkbox>
							</u-checkbox-group>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout">模块</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout">时长</view>
					</u-col>
					<u-col span="3">
						<view class="operation">操作</view>
					</u-col>
				</u-row>
				<scroll-view class="wrap_right_bottom_scroll" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" scroll-with-animation="true">
					<view class="row_u" v-for="(item,index) in program" :key="index">
						<u-row gutter="16">
							<u-col span="2">
								<view class="checkbox">
									<u-checkbox-group @change="checkedProgram(index)">
										<u-checkbox v-model="program[index].checked" shape="square" active-color="#FFC694"></u-checkbox>
									</u-checkbox-group>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout">{{item.name}}</view>
							</u-col>
							<u-col span="3" @click="redactTwo(item.play_time)">
								<view class="demo-layout">{{item.play_time}}h</view>
							</u-col>
							<u-col span="3">
								<view class="compileView">
									<view class="compile" @click="edit(item.model_type)">编辑</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</scroll-view>
			</view>
		</view>

    <view class="page-device">
      <view class="page_title">
        选择投放设备
      </view>
      <view class="info_data">
        <u-row gutter="16" >
          <u-col span="2">
            <view class="checkbox">
              <u-checkbox-group @change="CheckedAllTwo">
                <u-checkbox v-model="checkedAllTwo" shape="square" active-color="#FFC694"></u-checkbox>
              </u-checkbox-group>
            </view>
          </u-col>
          <u-col span="4">
            <view class="demo-layout">设备</view>
          </u-col>
          <u-col span="3">
            <view class="demo-layout">标题</view>
          </u-col>
          <u-col span="3">
            <view class="operation">操作</view>
          </u-col>
        </u-row>
        <scroll-view class="wrap_right_bottom_scroll" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" scroll-with-animation="true">
          <view class="row_u" v-for="(item,index) in equipment" :key="index">
            <u-row gutter="16">
              <u-col span="2">
                <view class="checkbox">
                  <u-checkbox-group @change="checkedDevice(index)">
                    <u-checkbox v-model="equipment[index].checked" shape="square" active-color="#FFC694"></u-checkbox>
                  </u-checkbox-group>
                </view>
              </u-col>
              <u-col span="4">
                <view class="demo-layout">{{item.name}}</view>
              </u-col>
              <u-col span="3" v-if="item.device_title">
                <view class="demo-layout">{{item.device_title}}</view>
              </u-col>
			  <u-col span="3" v-else>
			    <view class="demo-layout" >标题名称</view>
			  </u-col>
              <u-col span="3">
                <view class="compileView">
                  <view class="compile" @click="redact(item.id,item.device_title)">编辑</view>
                </view>
              </u-col>
            </u-row>
          </view>
        </scroll-view>
      </view>
    </view>
	
	<u-popup width="670rpx"  v-model="show" mode="center">
		<view class="popup" catchtouchmove="true">
			<view class="popup_del">
				设置和修改设备标题
			</view>
			<view class="popup_field">
				<u-input class="input" v-model="device_title" type="type" :border="border" placeholder-style="color: #FFD4A5"
					border-color="#81120D" height="80" :clearable="false" style="width: 100%"/>
			</view>
			<view class="popup_bottom">
				<view class="popup_bottom_left" @click="cancel">
					取消
				</view>
				<view class="popup_bottom_right" @click="ensure">
					确定
				</view>
			</view>
		</view>
	</u-popup>
	
	<u-popup width="700rpx" height="500rpx"  v-model="showTwo" mode="center">
		<view class="popupTwo" catchtouchmove="true">
			<view class="popup_titleTwo">
				<span class="popup_title_textOneTwo">调整节目单的播放时长</span>
			</view>
			<view class="popup_number_boxTwo">
				<view class="minusTwo" @click="reduceTwo">
					<u-icon name="minus"></u-icon>
				</view>
				<view class="numberTwo">
					<u-input v-model="num" type="number" :border="border" :placeholder="null" input-align="center" :clearable='false'/>
				</view>
				<view class="plusTwo" @click="increaseTwo">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
			<view class="popup_timeTwo">
				<span>单位：h（秒）</span>
			</view>
			<view class="popup_bottomTwo">
				<view class="popup_bottom_leftTwo" @click="cancelTwo">
					取消
				</view>
				<view class="popup_bottom_rightTwo" @click="ensureTwo">
					确定
				</view>
			</view>
		</view>
	</u-popup>

    <view class="bottom" @click="reviewProgramme">
      <view class="bottom_but">
        <span class="bottom_but_text">节目单生成预览</span>
      </view>
    </view>
	</view>
</template>

<script>
export default{
	name:'set',
	data(){
		return{
			program:[],
			equipment:[],
			checkedAll:'',
			checkedAllTwo:'',
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			deviceIds:[],
			show:false,
			showTwo:false,
			num:0,
			device_title:'',
			device_id:'',
			device_title:'',
      login_user:""
		}
	},
	mounted() {
    let loginUser = uni.getStorageSync("loginUser")
    if(loginUser){
      this.login_user = loginUser
    }
		this.getProgrammeList()
    this.getDeviceList()
	},
	methods:{
    loginOut(){
      uni.removeStorageSync("loginUser")
      uni.removeStorageSync("loginToken")

      uni.showToast({
        title: '退出登录！',
        duration: 2000,
      });
      setTimeout(() =>{
        uni.redirectTo({
          url:'/pages/equipment/management'
        })
      },2100)
    },
		async getProgrammeList(){
		  let params={
			"login_token":uni.getStorageSync('loginToken')
		  }
		  let res=await this.$api.getProgrammeList(params)
		  if(res.data.level == "success"){
			this.program = res.data.data;

			if(this.program.length > 0){
			  let allCheck = true
			  this.program.forEach(function (item,index){
				 if(!item.checked){
				   allCheck = false
				 }
			  })
          this.checkedAll = allCheck
        }
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
    async getDeviceList(){
      let params={
        "login_token":uni.getStorageSync('loginToken')
      }
      let res=await this.$api.getUserDeviceList(params)
      if(res.data.level == "success"){
        let resDatas = res.data.data;
		
        let _this = this
        if(resDatas.length > 0){
          // let allCheck = true
          resDatas.forEach(function (item,index){
            // if(!item.checked){
            //   // allCheck = false
            // }
             let result = {
               'name':item.desc,
               'checked':'',
               'id':item.id,
			   'device_title':item.device_title
             }
            _this.equipment.push(result)
          })

          // this.checkedAll = allCheck
        }
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		// 全选
		CheckedAll() {
			if(this.checkedAll == true){
				this.program.map(val => {
					val.checked = true;
				})
        this.seProgrammeActive(1,0)
			}else{
				this.program.map(val => {
					val.checked = false;
				})
        this.seProgrammeActive(0,0)
			}
			
		},
		CheckedAllTwo() {
			if(this.checkedAllTwo == true){
				this.equipment.map(val => {
					val.checked = true;
          this.deviceIds = []
          this.deviceIds.push(val.id)
				})

			}else{
				this.equipment.map(val => {
					val.checked = false;
          this.deviceIds = []
				})
			}
			
		},
    checkedDevice(index){
      let thatId = this.equipment[index].id
      if(this.equipment[index].checked){
        this.deviceIds.push(thatId)
      }else{
        var index2 = this.deviceIds.indexOf(thatId);
        if (index2 > -1) {
          this.deviceIds.splice(index2, 1);
        }
      }

      console.log(this.deviceIds)

      if(this.equipment.length > 0){
        let allCheck = true
        this.equipment.forEach(function (item,index){
          if(!item.checked){
            allCheck = false
          }
        })

        this.checkedAllTwo = allCheck
      }
    },
    checkedProgram(index){
      let status=1;
      if(!this.program[index].checked){
        status = 0;
      }
      this.seProgrammeActive(status,this.program[index].id)
    },
    async seProgrammeActive(status,id){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "programme_id":id,
        "status":status,
      }

      let res=await this.$api.setProgrammeActive(params)
      if(res.data.level == "success"){
        if(this.program.length > 0){
          let allCheck = true
          this.program.forEach(function (item,index){
            if(!item.checked){
              allCheck = false
            }
          })

          this.checkedAll = allCheck
        }
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
    edit(type){
      switch (type){
        case 'general_content':
            uni.navigateTo({
              url:'/pages/general/general_list'
            });
            break;
        case "community":
        case "wechat_material":
        case "sz_content":
            uni.navigateTo({
              url:'/pages/contentPreview/preview?model_type='+type
            });
            break;
      }
    },
    async reviewProgramme(){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "device_ids":this.deviceIds,
      }

      let res=await this.$api.setProgrammeDevice(params)
      if(res.data.level == "success"){
        uni.showToast({
          title: '设置成功！',
          duration: 2000,
        });
        setTimeout(() =>{
          uni.navigateTo({
            url:'/pages/programme/preview'
          })
        },2100)

      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
	//投放设备的编辑
	redact(id,name){
		this.device_id = id
		this.device_title = name
		this.show = true
	},
	//取消
	cancel(){
		this.device_id = ''
		this.device_title = ''
		this.show = false
	},
	//确定
	async ensure(){
		if(this.device_title==''){
			uni.showToast({
			  title:'请输入标题',
			  icon:'none'
			})
			this.device_id = ''
			this.device_title = ''
			return
		}
		const res = await this.$api.setDeviceTitle({
			'device_id':this.device_id,
			'device_title':this.device_title,
			"login_token":uni.getStorageSync('loginToken')
		})
		if(res.data.level == 'success'){
			uni.showToast({
			  title: '设置成功！',
			  duration: 2000,
			});
			// this.getProgrammeList()
      this.equipment=[]
			this.getDeviceList()
			this.show = false;
		}else{
			uni.showToast({
			  title: '设置失败！',
			  duration: 2000,
			});
		}
		this.device_id = ''
		this.device_title = ''
	},
	
	//时长
	redactTwo(time){
		this.num = time
		this.showTwo = true;
	},
	cancelTwo(){
		this.showTwo = false
	},
	ensureTwo(){
		let number = /^\d+$|^\d*\.\d+$/g
		if(!number.test(this.num)){
			uni.showToast({
			    title: '播放时长必须为数字',
			    duration: 2000,
				icon:'none'
			});
		}else{
			this.showTwo = false
		}
	},
	reduceTwo(){
		if(this.num!=0){
			this.num = (Number(this.num) - Number(0.01)).toFixed(2)
		}else{
			uni.showToast({
			    title: '播放时长不能少于0秒',
			    duration: 2000,
				icon:'none'
			});
		}
	},
	//增加
	increaseTwo(){
		console.log(this.num)
		this.num=(Number(this.num) + Number(0.01)).toFixed(2)
	},
	}
}
</script>

<style scoped lang="scss">
	.page{
		background-color: #fdc986;
		min-height: 100vh;
		overflow: hidden;
	}

  .device-title{
    color: #800A0B;
    font-weight: 600;
    font-size: 35rpx;
    padding: 20rpx;
    text-align: center;
  }

  .page-menu{
    padding: 20rpx 40rpx;

    .page_title{
      font-size: 35rpx;
      font-weight: 550;
      color: #800A0B;
    }
    .info_data{
      margin-top: 30rpx;
      width: 100%;
      height: 500rpx;
      line-height: 100rpx;
      background-color: #81120D;
      padding-bottom: 10rpx;
    }
    .info_table{
      background-color: #81120D;
    }
    .demo-layout{
      color: #FFC695;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
    }
    .checkbox{
      margin-top: 35rpx;
      margin-left: 10rpx;
    }
    .row_u{
      border-top: #FFC694 solid 1px;
    }
    .wrap_right_bottom_scroll{
      width: 100%;
      height: 398rpx;
    }
  }

  .page-device{
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-top: 20rpx;

    .page_title{
      font-size: 35rpx;
      font-weight: 550;
      color: #800A0B;
    }
    .info_data{
      margin-top: 30rpx;
      width: 100%;
      height: 300rpx;
      line-height: 100rpx;
      background-color: #81120D;
      padding-bottom: 10rpx;
    }
    .info_table{
      background-color: #81120D;
    }
    .demo-layout{
      color: #FFC695;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
    }
    .checkbox{
      margin-top: 35rpx;
      margin-left: 10rpx;
    }
    .row_u{
      border-top: #FFC694 solid 1px;
    }
    .wrap_right_bottom_scroll{
      width: 100%;
      height: 198rpx;
    }
  }

  .bottom{
    background-color: #FFC18A;
    border-top: #93110A solid 1rpx;
    position: fixed;
    bottom: 0;
    // left: 0;
    height: 130rpx;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom_but{
    background-image: url(../../static/img/login_imgTwo.png);
    background-repeat: no-repeat;
    height: 100rpx;
    background-size: 100% 100%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFC695;
  }
  .compileView{
	  height: 100rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
  .compile{
	  background-color: #FFC694;
	  color: #93110A;
	  height: 60rpx;
	  width: 100rpx;
	  border-radius: 10rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
  .operation{
	  color: #FFC695;
	  text-align: center;
  }
  .popup{
  	background-color: #FFC18A;
  	// height: 550rpx;
  	width: 100%;
  	text-align: center;
  }
  .popup_bottom{
  	display: flex;
  	justify-content: center;
  	// margin-top: 20rpx;
  	height: 100rpx;
  	border-top: #93110A solid 1px;
  }
  .popup_bottom_left{
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50%;
  	
  }
  .popup_bottom_right{
  	background-color: #93110A;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50%;
  	color: #FFC18A;
  }
  .popup_del{
  	  font-weight: 500;
  	  height: 200rpx;
  	  display: flex;
  	  justify-content: center;
  	  align-items: center;
  }
  .popup_field{
	  width: 80%;
	  background-color: #81120D;
	  border-radius: 10rpx;
	  margin: 0 auto;
	  margin-top: -50rpx;
	  margin-bottom: 50rpx;
  }
  /deep/.u-flex-1{
	  background-color: #93110A;
  }
  .popup_field{
  	 /deep/ .input{
  		.u-input__input{
  			color: #FFD4A5 !important;
  		}
  	}
  }
  
  .popupTwo{
  	background-color: #FFC18A;
  	height: 600rpx;
  	width: 100%;
  	text-align: center;
  }
  .popup_titleTwo{
  	width: 100%;
  	height: 80rpx;
  	padding-top: 50rpx;
  }
  .popup_number_boxTwo{
  	margin-top: 80rpx;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }
  .minusTwo{
  	width: 100rpx;
  	height: 100rpx;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	border-left: 1rpx solid #93110A;
  	border-bottom: 1rpx solid #93110A;
  	border-top: 1rpx solid #93110A;
  }
  .numberTwo{
  	width: 200rpx;
  	height: 100rpx;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	border: 1rpx solid #93110A;
  }
  .plusTwo{
  	width: 100rpx;
  	height: 100rpx;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	border-right: 1rpx solid #93110A;
  	border-bottom: 1rpx solid #93110A;
  	border-top: 1rpx solid #93110A;
  }
  
  
  /deep/.u-icon-plus{
  	width: 100rpx !important;
  	background-color: #93110A !important;
  	margin-left: -6rpx !important;
  	color: #FFC694 !important;
  }
  /deep/.u-icon-minus{
  	width: 100rpx !important;
  	background-color: #FFC18A !important;
  	border-bottom: #93110A solid 1rpx !important;
  	border-top: #93110A solid 1rpx !important;
  	border-left: #93110A solid 1rpx !important;
  	margin-right: -6rpx !important;
  	color: #93110A !important;
  }
  /deep/.u-number-input{
  	background-color: #FFC18A !important;
  	border: #93110A solid 1rpx !important;
  	height: 98rpx !important;
  
  }
  .popup_timeTwo{
  	margin-top: 30rpx;
  	color: #93110A;
  	font-size: 25rpx;
  }
  .popup_bottomTwo{
  	display: flex;
  	justify-content: center;
  	margin-top: 90rpx;
  	height: 100rpx;
  	border-top: #93110A solid 1px;
  }
  .popup_bottom_leftTwo{
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50%;
  
  }
  .popup_bottom_rightTwo{
  	background-color: #93110A;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50%;
  	color: #FFC18A;
  }
  .popup_title_textOneTwo{
  	font-size: 35rpx;
  	font-weight: 550;
  	margin-right: 15rpx;
  }
  .popup_title_textTwoTwo{
  	color: #93110A;
  	font-size: 35rpx;
  	font-weight: 550;
  	margin-right: 15rpx;
  }
</style>
